<template>
	<view class="theme-demo" :class="{ 'night-mode': isNightMode }">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">夜间模式演示</text>
			</view>
			<view class="header-right">
				<switch :checked="isNightMode" @change="toggleTheme" color="#007AFF" />
			</view>
		</view>

		<!-- 演示内容 -->
		<view class="demo-content">
			<!-- 卡片演示 -->
			<view class="demo-section">
				<text class="section-title">卡片样式</text>
				<view class="card">
					<text class="card-title">这是一个卡片标题</text>
					<text class="card-content">这是卡片的内容，展示了夜间模式下的文本颜色变化。</text>
				</view>
			</view>

			<!-- 按钮演示 -->
			<view class="demo-section">
				<text class="section-title">按钮样式</text>
				<view class="button-group">
					<button class="btn-primary">主要按钮</button>
					<button class="btn-secondary">次要按钮</button>
				</view>
			</view>

			<!-- 输入框演示 -->
			<view class="demo-section">
				<text class="section-title">输入框样式</text>
				<input class="input-field" placeholder="请输入内容" />
				<textarea class="textarea-field" placeholder="请输入多行内容"></textarea>
			</view>

			<!-- 列表演示 -->
			<view class="demo-section">
				<text class="section-title">列表样式</text>
				<view class="list">
					<view class="list-item" v-for="(item, index) in listItems" :key="index">
						<text class="item-title">{{ item.title }}</text>
						<text class="item-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>

			<!-- 状态演示 -->
			<view class="demo-section">
				<text class="section-title">状态指示器</text>
				<view class="status-group">
					<view class="status-item">
						<view class="status-dot online"></view>
						<text class="status-text">在线</text>
					</view>
					<view class="status-item">
						<view class="status-dot offline"></view>
						<text class="status-text">离线</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onUnmounted } from 'vue';
	import themeManager from '@/utils/theme.js';

	// 夜间模式状态
	const isNightMode = ref(themeManager.getNightMode());

	// 主题变化回调
	const onThemeChanged = (newMode: boolean) => {
		isNightMode.value = newMode;
	};

	// 切换主题
	const toggleTheme = () => {
		themeManager.toggleNightMode();
	};

	// 返回
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				uni.navigateTo({ url: '/pages/profile/profile' });
			}
		});
	};

	// 列表数据
	const listItems = ref([
		{ title: '列表项 1', desc: '这是第一个列表项的描述' },
		{ title: '列表项 2', desc: '这是第二个列表项的描述' },
		{ title: '列表项 3', desc: '这是第三个列表项的描述' }
	]);

	// 生命周期钩子
	onMounted(() => {
		themeManager.addListener(onThemeChanged);
	});

	onUnmounted(() => {
		themeManager.removeListener(onThemeChanged);
	});
</script>

<style>
	page {
		background-color: #f5f5f5;
		transition: background-color 0.3s ease;
	}

	.theme-demo {
		min-height: 100vh;
		background-color: #f5f5f5;
		transition: all 0.3s ease;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #007AFF, #5856D6);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.header-left {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		flex: 1;
		text-align: center;
	}

	.header-title {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.header-right {
		min-width: 60rpx;
	}

	/* 演示内容 */
	.demo-content {
		padding: 30rpx;
	}

	.demo-section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	/* 卡片样式 */
	.card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.card-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.card-content {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 按钮样式 */
	.button-group {
		display: flex;
		gap: 20rpx;
	}

	.btn-primary {
		flex: 1;
		background: #007AFF;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}

	.btn-secondary {
		flex: 1;
		background: #f5f5f5;
		color: #333;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}

	/* 输入框样式 */
	.input-field {
		width: 100%;
		background: #fff;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.textarea-field {
		width: 100%;
		background: #fff;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		height: 120rpx;
	}

	/* 列表样式 */
	.list {
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.list-item {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 8rpx;
		display: block;
	}

	.item-desc {
		font-size: 24rpx;
		color: #666;
	}

	/* 状态指示器 */
	.status-group {
		display: flex;
		gap: 40rpx;
	}

	.status-item {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.status-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
	}

	.status-dot.online {
		background: #34C759;
	}

	.status-dot.offline {
		background: #ccc;
	}

	.status-text {
		font-size: 26rpx;
		color: #333;
	}
</style>





